<template>
  <div id="forumpage"
       :style="{background: 'url('+bgimgBtn+')',backgroundRepeat: 'no-repeat',backgroundSize: '100% 100%'}">
    <div class="forum">
      <forumheader></forumheader>
      <div class="rourmCenter">
        <div class="rourmCenter-centent">
          <div class="centent-one linebox">
            <p class="centent-one-title">
              <span>最新精华文章</span>
              <span @click="showlist">查看全部精华 <i class="el-icon-arrow-right"></i></span>
            </p>
            <div class="article-body">
              <div class="article-body-list" @click="showDetail(index)" v-for="(item,index) in articleList" :key="index">
                <span class="article-body-list-index">{{index+1}}<i>.</i></span>
                <p class="article-body-list-title">{{item.title}}</p>
                <p class="article-body-list-right">
                  <span>版主:{{item.user.realname}}</span>
                  <span class="pointindex">·</span>
                  <span>评论{{item.comment_number}}</span>
                  <span class="pointindex">·</span>
                  <span>点赞{{item.laud}}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="rourmCenter-right">
          <modulelist></modulelist>
          <modulecate :cateList="cateList"></modulecate>
          <!--<div class="rourmCenter-right-two">-->
          <!--<div class="ponitlist">-->
          <!--<p class="ponitlist-title">昨日文章阅读数</p>-->
          <!--<span class="ponitlist-num">200</span>-->
          <!--<p class="ponitlist-check">较前日<span><i class="iconxiangshangjiantou iconfont"></i>80%</span></p>-->
          <!--</div>-->
          <!--<div class="ponitlist">-->
          <!--<p class="ponitlist-title">昨日评论点赞数</p>-->
          <!--<span class="ponitlist-num">200</span>-->
          <!--<p class="ponitlist-check">较前日<span><i class="iconxiangxiajiantou iconfont"></i>20%</span></p>-->
          <!--</div>-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <forumDetail :visible.sync="detailVisible" :detailId="detailId" detailType="1"></forumDetail>
    <historylist :visible.sync="listVisible"></historylist>
  </div>
</template>

<script>
  import bgimgBtn from '@/assets/imageAdmin/bgforue.png'
  import modulecate from '@/components/forum/modulecate'
  import modulelist from '@/components/forum/modulelist'
  import forumheader from '@/components/forum/headerforum'
  import forumDetail from "@/components/forum/forumDetail";
  import historylist from "@/components/forum/historylist";

  import api from '@/utils/api.js'
  import '@/assets/scss/forum.scss'

  export default {
    components: {
      modulecate,
      modulelist,
      forumheader,
      forumDetail,
      historylist
    },
    data () {
      return {
        detailVisible:false,
        bgimgBtn: bgimgBtn,
        plate: [], // 版主
        examine: [], // 审核人
        userInfo: null,
        oneState: false,
        articleList: [],
        cateList: [],
        detailId: 0,
        listVisible: false
      }
    },
    created () {
      this.articleFn()
    },
    methods: {
      articleFn () {
        this.$fetch(api.forum_postings_show_index, {}).then((response) => {
          if (response.code === 0) {
            this.articleList = response.list
            this.cateList = response.path
            console.log('论坛列表：', response.path.length)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      showDetail (index) {
        this.detailId = this.articleList[index].id;
        this.detailVisible = true;
        // this.$router.push('/forumdetail?type=1&id=' + this.articleList[index].id)
      },
      showlist () {
        this.listVisible = true;
        // this.$router.push('/forumlist')
      },
      forumcommentFn () {
        this.$router.push('/forumcomment')
      },
      addarticlFn () {
        this.$router.push('/forumarticledit')
      },
      forumexamine () {
        this.$router.push('/forumexamine')
      }
    },
    mounted () {
    }
  }
</script>


